<template>
  <view class="order-info-container">
    <!-- 头部店铺信息 -->
    <view class="shop-header">
      <view class="shop-info">
        <image
          class="shop-icon"
          :src="
            orderInfo.base_info?.shop_logo ||
            'https://stock-account.oss-cn-shenzhen.aliyuncs.com/dev/upload/2025-05-07/681b26cbe0451.png'
          "
          mode="fill"
        ></image>
        <text class="shop-name">{{
          orderInfo.base_info?.shop_name || ""
        }}</text>
      </view>
      <view
        class="order-status"
        :style="{
          color: tabs.find(
            (tab) => tab.id === orderInfo.base_info?.order_status
          )?.color,
        }"
        >{{ orderInfo.base_info?.order_status_desc }}</view
      >
    </view>

    <!-- 订单商品列表区域 -->
    <scroll-view class="order-content" scroll-y>
      <!-- 商品明细标题 -->
      <view class="section-title">
        <view>采购明细</view>
        <template v-if="checkRoles('wx_editprice', 'btn')">
          <view class="edit-price-btn" @click="editPrice" v-if="!isEditPrice"
            >编辑价格</view
          >
          <view class="success-save-btn" @click="savePrice" v-else>保存</view>
        </template>
      </view>

      <!-- 商品列表 -->
      <view class="goods-list">
        <view
          class="goods-item"
          v-for="(goods, index) in orderInfo.order_detail"
          :key="index"
        >
          <view class="goods-name">{{ goods.product_name }}</view>
          <view class="goods-detail">
            <view class="goods-row">
              <text class="label">商品：</text>
              <text class="value">{{ goods.goods_name }}</text>
            </view>
            <view class="goods-row">
              <text class="label">品牌：</text>
              <text class="value">{{ goods.brand_name }}</text>
              <text class="label ml">备注：</text>
              <text class="value">{{ goods.remark }}</text>
            </view>
            <view class="goods-row">
              <text class="label">规格：</text>
              <text class="value">{{
                goods.goods_value_name.replace("??", "、")
              }}</text>
              <text class="label ml">数量：</text>
              <text class="value"
                >{{ goods.quantity
                }}<text v-if="goods.unit">/{{ goods.unit }}</text></text
              >
            </view>
            <view class="goods-row">
              <text class="label">单价：</text>
              <text class="value price" v-if="!isEditPrice"
                >¥ {{ goods.price }}</text
              >
              <input
                type="number"
                v-if="isEditPrice"
                style="
                  width: 110rpx;
                  font-size: 28rpx;
                  border-bottom: 1rpx solid #ccc;
                "
                v-model="goods.price"
              />
              <text class="label ml">合计：</text>
              <text class="value price">¥ {{ goods.total_price }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息区域 -->
      <view class="order-info">
        <view class="info-row">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderInfo.base_info?.order_sn }}</text>
        </view>
        <view class="info-row">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderInfo.base_info?.create_time }}</text>
        </view>
        <view
          class="info-row"
          v-if="[3, 4].includes(orderInfo.base_info?.order_status)"
        >
          <text class="label">发货时间：</text>
          <text class="value">{{ orderInfo.base_info?.delivery_time }}</text>
        </view>
        <view class="info-row">
          <text class="label">采购金额：</text>
          <text class="value">¥ {{ orderInfo.base_info?.pay_amount }}</text>
        </view>
        <view class="info-row">
          <text class="label">业务员：</text>
          <text class="value">{{
            orderInfo.base_info?.sales_person_name
          }}</text>
        </view>
      </view>
      <!-- 配送信息 -->
      <view class="order-info">
        <view class="info-row">
          <text class="label">收货人：</text>
          <text class="value">{{
            orderInfo.distribution_info?.consignee
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">手机号：</text>
          <text class="value">{{
            orderInfo.distribution_info?.consignee_mobile
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">配送地址：</text>
          <text class="value">{{ orderInfo.distribution_info?.address }}</text>
        </view>
      </view>

      <!-- 配送信息 -->
      <view
        class="order-info"
        v-if="orderInfo.distribution_info?.delivery_method_desc"
      >
        <view class="info-row">
          <text class="label">发货方式：</text>
          <text class="value">{{
            orderInfo.distribution_info?.delivery_method_desc
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">快递单号：</text>
          <text class="value">{{
            orderInfo.distribution_info?.logistics_no
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">快递名称：</text>
          <text class="value">{{
            orderInfo.distribution_info?.logistics_compan
          }}</text>
        </view>
      </view>

      <!-- 底部总价占位，防止被底部按钮遮挡 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

    <!-- 底部固定按钮区域 -->
    <view class="bottom-actions">
      <view class="total-price">
        <view style="display: flex; align-items: center">
          <text class="nowrap">实付：</text>
          <text class="price nowrap"
            >¥ {{ orderInfo.base_info.pay_amount }}</text
          >
        </view>
        <view class="small">(不含运费)</view>
      </view>
      <view class="action-buttons">
        <button
          class="cancel-btn"
          @tap="cancelOrderOption"
          v-if="
            orderInfo.base_info?.order_status < 4 &&
            checkRoles('wx_cancelSingle', 'btn')
          "
        >
          取消订单
        </button>
        <button
          class="confirm-btn"
          @tap="sendGoodsOpen"
          v-if="
            orderInfo.base_info?.order_status === 2 &&
            checkRoles('wx_send', 'btn')
          "
        >
          发货
        </button>
      </view>
      <SendOrder ref="SendOrderRef" @sendGoods="sendGoods" />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  cancelOrder,
  getOrderInfo,
  sendGoodsApi,
  editOrderPrice,
} from "@/api/order";
import { tabsList } from "@/utils/const";
import SendOrder from "@/component/sendOrder.vue";
import { showToast } from "@/utils/helper";
const tabs = ref(tabsList);
// 接收页面参数
const orderId = ref("");
const isEditPrice = ref(false);

const editPrice = () => {
  isEditPrice.value = true;
};
const savePrice = async () => {
  const res = await editOrderPrice({
    id: orderInfo.value.base_info.id,
    order_detail: JSON.stringify(
      orderInfo.value.order_detail.map((item) => ({
        id: item.id,
        price: item.price,
        quantity: item.quantity,
      }))
    ),
  });
  isEditPrice.value = false;
  await getorderInfo();
  showToast("保存成功");
};

// 模拟订单数据
const orderInfo = ref({
  base_info: {},
  order_detail: [],
});

const cancelOrderOption = (item) => {
  console.log(item);
  uni.showModal({
    title: "提示",
    content: "确定取消订单吗？",
    success: async (res) => {
      if (res.confirm) {
        await cancelOrder({
          id: orderId.value,
        });
        showToast("取消订单成功");
        getorderInfo();
      }
    },
  });
};

const getorderInfo = async () => {
  const res = await getOrderInfo({
    id: orderId.value,
  });
  orderInfo.value = res;
};

const SendOrderRef = ref(null);
const sendGoodsOpen = () => {
  SendOrderRef.value.show(orderId.value);
};

const sendGoods = async (sendInfo) => {
  await sendGoodsApi(sendInfo);
  SendOrderRef.value.close();
  await getorderInfo();
  showToast("发货成功");
};
// 页面加载
onLoad((options) => {
  orderId.value = options.id;
  getorderInfo();
});
</script>

<style lang="scss" scoped>
.order-info-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #eee;

  .shop-info {
    display: flex;
    align-items: center;

    .shop-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      object-fit: cover;
    }

    .shop-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-right: 20rpx;
    }
  }

  .order-status {
    font-size: 28rpx;
    color: #3399ff;
  }
}

.order-content {
  flex: 1;
  overflow: hidden;
  padding-bottom: 120rpx; // 为底部按钮留出空间

  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #1989fa;
    padding: 20rpx 20rpx 0 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .edit-price-btn {
      color: #fff;
      background: orange;
      padding: 5px;
      border-radius: 5px;
    }

    .success-save-btn {
      color: #fff;
      background: #318fec;
      padding: 5px;
      border-radius: 5px;
    }
  }

  .goods-list {
    background-color: #fff;

    .goods-item {
      padding: 30rpx;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .goods-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .goods-pru {
        font-size: 26rpx;
        color: #666;
      }

      .goods-detail {
        .goods-row {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          .label {
            font-size: 26rpx;
            color: #666;
          }

          .value {
            font-size: 26rpx;
            color: #333;
          }

          .ml {
            margin-left: 40rpx;
          }

          .price {
            color: #ff0000;
          }
        }
      }
    }
  }

  .order-info {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 30rpx;

    .info-row {
      display: flex;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 26rpx;
        color: #666;
        width: 160rpx;
      }

      .value {
        font-size: 26rpx;
        color: #333;
        flex: 1;
      }
    }
  }

  .bottom-placeholder {
    height: 120rpx; // 与底部按钮高度一致
  }
}

.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 100;

  .total-price {
    font-size: 28rpx;
    color: #333;

    .price {
      font-size: 34rpx;
      font-weight: bold;
      color: #ff0000;
    }

    .small {
      font-size: 24rpx;
      color: #999;
    }
  }

  .action-buttons {
    display: flex;
    gap: 20rpx;
    margin-left: auto;

    button {
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      border-radius: 35rpx;

      &.cancel-btn {
        background-color: #fff;
        color: #666;
        border: 1px solid #ddd;
      }

      &.confirm-btn {
        background-color: #3399ff;
        color: #fff;
        border: none;
      }
    }
  }
}

.nowrap {
  white-space: nowrap;
}
</style>
